<template>
  <div class="todoapp">
    <TodoHeader @create="createfn"></TodoHeader>
    <TodoMain :arr="list"></TodoMain>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
// 引入样式和组件
import "./styles/base.css"
import "./styles/index.css"
import TodoHeader from "./components/todoHeader.vue"
import TodoMain from "./components/todoMain.vue"
import TodoFooter from "./components/todoFooter.vue"
export default {
  // 注册组件
  components:{
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
   data() {
    return {
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    };
  },
  methods:{
    createfn(taskname){
      let id=this.list.length==0?100:this.list[this.list.length-1].id+1
      this.list.push({
        id:id,
        name:taskname,
        isDone:false
      })
    }
  }
}
</script>

<style>

</style>